<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5之audio标签</title>
    <style>
        div#buttonDiv {
            width: 800px;
        }

        progress#playPercent {
            width: 800px;
        }

        div#divLeft {
            float: left;
        }

        div#divRight {
            float: right;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        var audio;   //获取audio标签
        var showTime;   //获取播放时间隐藏层

        /*使body标签预加载音频的方法*/
        function window_onload() {
            if (window.HTMLAudioElement) {
                document.getElementById("btnPlay").disabled = "";
                audio = document.getElementById("audio");
                progress = document.getElementById("playPercent");
                progress.onclick = progress_click;
            }
            else {
                document.getElementById("buttonDiv").style.display = "none";
            }
        }

        /*播放音频方法*/
        function btnPlay_onclick() {
            audio = document.getElementById("audio");
            if (audio.paused)
                audio.play();
            else
                audio.pause();
            audio.addEventListener('ended', audioEnded, false);
            audio.addEventListener('play', audioPlay, false);
            audio.addEventListener('pause', audioPause, false);
            audio.addEventListener('timeupdate', updateProgress, false);
        }

        /*播放完毕后，用于恢复初始状态的方法*/
        function audioEnded(ev)
        {
            audio.currentTime = 0;
            this.pause();
        }

        /*当播放时激活所有按钮*/
        function audioPlay(ev)
        {
            var btnPlay = document.getElementById("btnPlay");
            btnPlay.innerHTML = "暂停";
            document.getElementById("btnBackPlay").disabled = "";
            document.getElementById("btnForwardPlay").disabled = "";
            document.getElementById("btnRestart").disabled = "";
            document.getElementById("btnMute").disabled = "";
            document.getElementById("btnVolumeUp").disabled = "";
            document.getElementById("btnVolumeDown").disabled = "";
        }

        /*当暂停时禁用所有按钮*/
        function audioPause(ev) {
            var btnPlay = document.getElementById("btnPlay");
            btnPlay.innerHTML = "播放";
            document.getElementById("btnBackPlay").disabled = "disabled";
            document.getElementById("btnForwardPlay").disabled = "disabled";
            document.getElementById("btnRestart").disabled = "disabled";
            document.getElementById("btnMute").disabled = "disabled";
            document.getElementById("btnVolumeUp").disabled = "disabled";
            document.getElementById("btnVolumeDown").disabled = "disabled";
        }

        /*跳转方法：点击播放进度条，跳转到相应的进度上*/
        function updateProgress() {
            var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
            var progress = document.getElementById('playPercent');
            progress.value = value;
            var showTime = document.getElementById("showTime");
            if (!isNaN(audio.duration))
                showTime.innerHTML = calcTime(Math.floor(audio.currentTime)) + '/' + calcTime(Math.floor(audio.duration));
        }

        /*播放进度的计算方法*/
        function calcTime(time) {
            var hour;
            var minute;
            var second;
            hour = String(parseInt(time / 3600, 10));
            if (hour.length == 1) hour = '0' + hour;
            minute = String(parseInt((time % 3600) / 60, 10));
            if (minute.length == 1) minute = '0' + minute;
            second = String(parseInt(time % 60, 10));
            if (second.length == 1) second = '0' + second;
            return hour + ":" + minute + ":" + second;
        }

        /*跳转方法：点击播放进度条div，跳转到相应的进度上*/
        function progress_click(evt) {
            var o = window.event || evt;  //写事件兼容

            /*IE和火狐的兼容，获取鼠标相对于目标事件的父元素的内边界在x坐标上的位置*/
            var coord_X = o.offsetX || o.layerX;

            playPercent = document.getElementById("playPercent");
            audio.currentTime = audio.duration * (coord_X / playPercent.clientWidth);
        }

        /*后退进度方法*/
        function btnBackPlay_click()
        {
            audio.currentTime -= 30.0;
        }

        /*前进进度方法*/
        function btnForwardPlay_click() {
            audio.currentTime += 30.0;
        }

        /*重新播放方法*/
        function btnRestart_click() {
            audio.currentTime = 0;
        }

        /*静音方法*/
        function setMute() {
            if (!audio.muted) {
                audio.muted = true;
                document.getElementById("btnMute").innerHTML = "取消静音";
            }
            else {
                audio.muted = false;
                document.getElementById("btnMute").innerHTML = "静音";
            }
        }

        /*增大音量方法*/
        function VolumeUp()
        {
            if (audio.volume < 1)
                audio.volume += 0.1;
        }

        /*缩小音量方法*/
        function VolumeDown() {
            if (audio.volume > 0)
                audio.volume -= 0.1;
        }
    </script>
</head>

<body onload="window_onload()">
    <audio id="audio" src="resourse/1.mp3">
        您的浏览器不支持audio元素
    </audio>
    <div id="buttonDiv">
        <div id="divLeft"><progress id="playPercent" max=100></progress></div>
        <div id="divRight"><span id="showTime"></span></div>
        <button id="btnPlay" onclick="btnPlay_onclick()" disabled />播放</button>
        <button id="btnBackPlay" onclick="btnBackPlay_click()" disabled />后退</button>
        <button id="btnForwardPlay" onclick="btnForwardPlay_click()" disabled />前进</button>
        <button id="btnRestart" onclick="btnRestart_click()" disabled />重新开始</button>
        <button id="btnMute" onclick="setMute()" disabled />静音</button>
        <button id="btnVolumeUp" onclick="VolumeUp()" disabled />增大音量</button>
        <button id="btnVolumeDown" onclick="VolumeDown()" disabled />
        降低音量</button>
    </div>

</body>

</html>